import React, { useState, useEffect } from 'react';
import { Card, Form, Select } from "antd";
import { Col, Row } from 'antd';
import {
    changeAllCategoryList,
    changeCategory1List,
    changeCategory2List,
    changeCategory3List,
} from "@/app/Category";
import { useDispatch, useSelector } from 'react-redux'
import {
    category2, category3,
    getCategory1ListApi,
    getCategory2ListApi,
    getCategory3ListApi,
    getPlatformAttributeListApi
} from '@api/user/category'
import { useForm } from 'antd/es/form/Form'

type LayoutType = Parameters<typeof Form>[0]['layout'];

function Category() {
    const [formLayout, setFormLayout] = useState<LayoutType>('inline');
    const [category1Id, setCategory1Id] = useState(-1)
    const [category2Id, setCategory2Id] = useState(-1)
    const [category3Id, setCategory3Id] = useState(-1)
    const [List, setList] = useState<category3>()
    const dispatch = useDispatch()
    const data = useSelector(data => {
        return data
    })
    const [from] = useForm()

    // 一级数据
// 获取一级分类
    let asyncGetCategory1List = async () => {
        try {
            const res = await getCategory1ListApi()
            dispatch(changeCategory1List(res))
        } catch (e) {
            return Promise.reject('失败')
        }
    }
    useEffect(() => {
        asyncGetCategory1List()
    }, [])
    // 选择的回调

// 获取二级分类
    let asyncGetCategory2List = async (id: number) => {
        try {
            const res = await getCategory2ListApi(id)
            dispatch(changeCategory2List(res))
        } catch (e) {
            return Promise.reject('失败')
        }
    }
    const handleChange = async (value: number, option: any) => {
        // @ts-ignore
        setList([])
        from.setFieldsValue({
            username: '',
            san: ''
        })
        await asyncGetCategory2List(value)
        setCategory1Id(value)
        setCategory2Id(-1)
        setCategory3Id(-1)
    }
    // 获取三级分类
    const asyncGetCategory3List = async (id: number, option: any) => {
        try {
            const res = await getCategory3ListApi(id)
            setList(res)
            dispatch(changeCategory3List(res))
        } catch (e) {
            return Promise.reject('失败')
        }
    }
    const handleChange2 = async (value: number, option: any) => {
        // @ts-ignore
        await asyncGetCategory3List(value)
        setCategory2Id(value)
        setCategory3Id(-1)
    }
    const handleChange3 = async (value: number) => {

        setCategory3Id(value)
        const res = await getPlatformAttributeListApi(category1Id, category2Id, category3Id)
        dispatch(changeAllCategoryList(res))
    }

    return (
        <Card>
            <Form
                name="basic"
                initialValues={{remember: true}}
                autoComplete="off"
                layout={formLayout}
                form={from}
            >
                <Row>
                    <Col span={8}>
                        <Form.Item
                            label="一级类别"
                            name="name"
                        >
                            <Select
                                style={{width: 250}}
                                onChange={handleChange}
                                // @ts-ignore
                                options={data.category.category1List}
                                fieldNames={{label: 'name', value: 'id'}}
                                placement={'bottomRight'}

                            />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            label="二级类别"
                            name="username"
                        >
                            <Select
                                style={{width: 250}}
                                onChange={handleChange2}
                                // @ts-ignore
                                options={data.category.category2List}
                                fieldNames={{label: 'name', value: 'id'}}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            label="三级类别"
                            name={'san'}
                        >
                            <Select
                                style={{width: 250}}
                                onChange={handleChange3}
                                // @ts-ignore
                                options={List}
                                fieldNames={{label: 'name', value: 'id'}}
                            />
                        </Form.Item>
                    </Col>
                </Row>


            </Form>
        </Card>
    );
}

export default Category;